<template>
    <div>
        <div id="body">
            <div class="body">
                <ul class="login_form">
                    <li>
                        <img src="http://127.0.0.1:3000/login-6_03.png" />
                    </li>
                    <li>
                        <img class="img_email" src="http://127.0.0.1:3000/login1_03.png" />
                        <input class="get_email" type="text" placeholder="请输入您的邮箱账号" v-model="uname">
                    </li>
                    <li>
                        <img class="img_pwd" src="http://127.0.0.1:3000/login-2_06.png" />
                        <input class="get_pwd" type="password" placeholder="请输入您的登录密码" v-model="upwd">
                    </li>
                    <li>
                        <input type="checkbox" name="remember" checked>
                        <span>请保存我这次的登录信息</span>
                        <a href="javascript:;">使用邮件找回密码</a>
                    </li>
                    <li>
                        <button class="login_" @click="login">登录</button>
                        <button class="reg_" @click="jumpReg">注册</button>
                    </li>
                    <li class="last_login">
                        <span>使用第三方合作网站账号登录：</span>
                        <img src="http://127.0.0.1:3000/login_03.png" />
                    </li>
                </ul>
            </div> 
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            uname:"",// 用户输入用户名
            upwd:""  //用户输入密码
        }
    },
    methods:{
        login(){
           //功能：完成用户登录操作
           //1.获取用户输入用户名
            var u=this.uname;
           //2.获取用户输入密码
           var p=this.upwd;
           //console.log(u+"_"+p);
           //3.创建正则表达式验证用户名和密码
           //用户名验证：邮箱||手机号
           var reg1=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
           //密码强度正则，最少6位
           var reg2=/^[a-zA-Z0-9]{6,}$/;
           //4.用户验证失败  提示短消息
            if(!reg1.test(u)){
                alert("用户名格式不正确");
                return;//失败停止执行
            }
            //5.密码验证失败  提示短消息
            if(!reg2.test(p)){
                alert("密码格式不正确");
                return;//失败停止执行
            }
            //6.发送ajax 请求 axios
            var url="login";
            var obj={uname:u,upwd:p}
            this.axios.get(url,{params:obj}).then
            (res=>{
                //7.获取服务器返回结果
                //7.1 登录失败  提示
                if(res.data.code==-1){
                    alert("用户名或密码有误");
                }else{
                    //7.2登录成功 跳转商品首页组件
                    //vue中一个组件执行跳转，用this.$router.push("路径");
                    this.$router.push("/Index");

                }
            })
       },
       jumpReg(){
           //跳转到注册页面
           this.$router.push("/Register");
       }
    }
}
</script>
<style scoped>
#body{
    min-height:580px;width:100%;
    background: url(http://127.0.0.1:3000/login-bg_02.png) no-repeat;
    margin-bottom:66px;
}
.body{
    width:410px;height:466px;
    background:url(http://127.0.0.1:3000/zhuce-bg_03.png);
    border-radius:8px;
    position:absolute;
    top:26%;right:23%;
}
.body .login_form{
    display: block;
    list-style: none;
    margin:45px 0px 0px;
    padding:0px 40px;
}
.body .login_form li .get_email,.body .login_form li .get_pwd{
    width:330px;height:45px; 
    padding-left:50px;
    border:1px solid #d8d8d8;
    border-radius: 8px;
    color:#999;
    font-size:15px;
    display: block;
    margin: 15px 0px auto;
}
.body .login_form li .img_email{
    position: absolute;
    top:21%;left:14%;
}
.body .login_form li .img_pwd{
    position: absolute;
    top:34%;left:14%;
}
.body .login_form :nth-child(4){
    margin-top:10px;
}
.body .login_form :nth-child(4) span{
    color:#999;
    font-size:14px;
}
.body .login_form :nth-child(4) a{
    color:#22abcc;
    font-size:14px;
    margin-left:10%;
    text-decoration: none;
}
.body .login_form li button{
    width:145px;height: 37px;
    margin-top:52px;
    color:#fff;
    text-align: center;
    border:0;
    margin-left:12px;
}
.body .login_form li .login_{
    background: #d7d7d7;
}
.body .login_form li .reg_{
    background: #22abcc;
}
.body .login_form .last_login{
    color:#999;
    font-size:14px;
    margin-top:25px;
}
</style>